[CSS] 클래스 또는 not 선택자등과 함께 nth-of-type 또는 nth-child 속성 적용 안될 경우

Last Modified : 2018-08-29 / Created : 2016-01-27

7,675
View Count

주소 복사하기

CSS 선택자 중 일부 요소에게만 스타일을 적용할 경우 ... 이때 사용가능한 속성이 바로 nth-child() 그리고 nth-of-type() 속성입니다. 그런데 만약 이 속성이 정상적으로 적용이 안된다면??

이유는 여러가지 있을 수 있겠지만 아무런 문제가 없이 코드 적용이 되었다는 전제하에 다음의 경우를 생각해볼 수 있습니다. 적용할 CSS가 태그 요소외에 스타일이나 아니면 not() 선택자 등의 또 다른 선택자 요소가 포함되었다면 문제가 발생할 수 있습니다.

!! nth-child 그리고 nth-of-child 속성은 해당하는 요소가 가지는 타입(클래스, 속성, 다른 선택자)에 영향을 받지 않는다

그래서 클래스나 ID에 의하여 분류하는 경우 ... 아니면 :not() 선택자등을 통해 타입을 다르게 설정한다고 해도 이것이 정상적으로 동작하지 않는다는 점입니다...

그럼 아래의 예제를 통해 실제로 어떤 현상이 나타나는지 더 자세히 알아보겠습니다.

<div>
<p class="yes">1</p>
<p class="yes">2</p>
<p class="yes">3</p>
<p class="no">4</p>
<p class="yes">5</p>
</div>

<style type="text/css">
div p:nth-child(2n) {
color: #f00;
}
</style>

# 위 코드의 적용된 결과 보기 !

1
2
3
4
5

위 텍스트에서 2, 4는 빨간색으로 폰트색이 변경되게 될 것입니다. 하지만 만약 아래처럼 클래스명을 추가로 적용하여 요소를 검색하여도 그 부분은 반영되지 않습니다. 다시말해...
yes 클래스명을 가진 요소만 반영하기 위해 아래처럼 코드를 작성할 경우 아래처럼 결과가 나타나게 됩니다.

# 위의 코드 적용된 결과보기

1
2
3
4
5

4가 선택자에 포함되지 않아 그 다음인 5가 빨간색으로 나타날 것이라 예상할 수 있으나 실제 결과는 그렇지 않게됩니다... 결국 이런 문제를 피하기 위해서는 nth-child 또는 nth-of-type 속성을 사용할 때 또 다른 선택자 방식을 사용하는 방법을 피해야 한다는 것입니다.

아래의 글도 찾고 계시지 않나요?

멀티라인, [CSS] ellipsis 두줄 이상에 줄임표시, 생략표시 적용 방법

[CSS] text-overlfliw ellipsis 속성 inline 속성에 적용 안되는 경우